<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="font/iconfont.css">
    <style>
        * {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;}
html {
  font-size: 20px;
  margin: 0;
  padding: 0;
  background-color: #F5F5F5;
}
        .nav {
  width: 100%;
  height: 2.5rem;
  background-color: #E54847;
}

.nav .nav-text .navigation {
  display: flex;
  padding: 0 10px;
  justify-content: space-between;
  color: #fff !important;
  font-weight: 700;
  line-height: 2.5rem;
}

.nav .nav-text .navigation .navigation-left {
  padding: 0px !important;
}

.nav .nav-text .navigation .iconfont {
  font-size: 1rem !important;
}

.nav .nav-text .navigation p {
  color: #fff !important;
  font-size: 1rem !important;
}

.nav .nav-text .navigation a {
  color: #fff !important;
}

.nav .nav-text .navigation .home .more {
  position: absolute;
  right: 10px;
  top: 40px;
  text-align: center;
  background-color: #fff;
  display: none;
  width: 5.5rem;
  z-index: 100;
}

.nav .nav-text .navigation .home .more p {
  margin: 0;
  padding: 0;
  font-size: .7rem !important;
  line-height: 45px;
  border-bottom: 1px solid #F0F0F0;
}

.nav .nav-text .navigation .home .more p a {
  color: #000 !important;
}

.nav .nav-text .navigation .home:hover .more {
  display: block;
}
.input {
    padding:.6rem;
    position: relative;
    display: flex;
    border-bottom: 1px solid #ccc;
}
input { 
   
    width:90%;
    height: 1.5rem;
    padding-left: 2rem;
    font-size: .7rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    outline: none;
}.input img {
    position: absolute;
    width: .8rem;
    height: .8rem;
    top: 1rem;
    left: 1.25rem;
}
.input span {
    text-align: center;
    display:inline-block;
    width: 2rem;
    line-height: 1.5rem;
    margin-left: 10px;
    font-size: .8rem;
    color: #F03D37;
}
    </style>
</head>
<body>
    <div class="nav">
        <div class="nav-text">
           <div class="navigation">
                <div class="navigation-left"><a href="./index.html" class="iconfont">&#xe62c;</a></div>
                <p>影视快讯</p>
                <div class="iconfont home">&#xe66c;
                    <div class="more">
                        <p class="home"><a href="./index.html">首页</a></p>
                        <p class="home"><a href="./list.html">榜单</a></p>
                        <p class="home"><a href="./hotspot.html">热搜</a></p>
                        <p class="home"><a href="./tab-with-segmented-control.html">商城</a></p>
                    </div>
                </div>
            </div> 
        </div>
    </div>
    <div class="input">
        <img src="https://s0.meituan.net/bs/myfe/canary/file/apollo/images/search.png" alt="">
        <input type="text" placeholder="搜电影、搜影院">
        <span>取消</span>
    </div>
</body>
<script>
(function () {
    function w() {
        var all = document.documentElement;  // 获取html元素
        var test = all.getBoundingClientRect().width;  // 获取当前设备的宽度、
        console.log(123,test)
        if (test > 750) {
            test = 750;
        }
        rem = test / 18.75;
        console.log(rem)
        all.style.fontSize = rem + 'px'
    }
    w();
    window.addEventListener("resize", function () {
        w()
    }, false)
})(); 
 </script>
</html>